<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鸟巢</title>
</head>
<body>
    <button onclick="start()">开始绘制</button>
    <button onclick="stop()">结束绘制</button>

    <canvas id="myCanvas" width="500" height="300" style="background-color: #000000">
        糟糕 你的浏览器 我还搞不懂也？
    </canvas>

    <script src="script/wind/wind-all-0.7.3.js"></script>
<script>
    let myCanvas = document.getElementById("myCanvas");
    let cxt = myCanvas.getContext("2d");
    let px = 0;
    let py = 0;
    cxt.strokeStyle = "#fff";
    cxt.translate("70", "70");

    /**
     * 椭圆绘制
     * 椭圆绘制方案：
     * 1、根据椭圆笛卡儿坐标系方程绘制
     * 2、根据椭圆极坐标方程绘制
     * 3、利用4条贝塞尔曲线绘制
     * @param x，y 椭圆的左上角坐标
     * @param y
     * @param w，h 分别为长轴和短轴
     * @param h
     */
    let drawEllipse = function (x, y, w, h) {
        let points = [{}];
        let plan1 = function () {
            for(let i = 0; i < points.length - 1; i++) {
                let p1 = points[i];
                let p2 = points[i + 1];
                cxt.beginPath();
                cxt.moveTo(p1.x, p1.y);
                cxt.lineTo(p2.x, p2.y);
                cxt.stroke();
            }
        }

        let plan2 = function () {
            cxt.beginPath();
            for (let i = 0; i < points.length; i++) {
                let p1 = points[i];
                let p2 = points[i + 1];
                cxt.moveTo(p1.x, p1.y);
                cxt.lineTo(p2.x, p2.y);
            }
            cxt.stroke();
        }
        
        let plan3 = function () {
            let k = 0.55228475;
            let ox = (w / 2) * k;
            let oy = (h / 2) * k;
            let xe = x + w;
            let ye = y + h;
            let xm = y + w / 2;
            let ym = y + h / 2;
            cxt.beginPath();
            cxt.moveTo(x, ym);
            // 为当前的子路径添加一个三次贝塞尔曲线。
            cxt.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
            cxt.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
            cxt.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
            cxt.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
            cxt.stroke();
            cxt.translate(x + 70, y + 100);
            px = -70;
            py = -100;
            cxt.rotate(10 * Math.PI * 2 / 360);
        }
        plan3();
    }
    let ct = undefined;
    let drawAsync = eval(Wind.compile("async", function (ct1) {
        while (true) {
            if (ct === undefined) break;
            drawEllipse(px, py, 140, 200);
            $await(Wind.Async.sleep(200, ct1));
        }
    }));
    
    let start = function () {
        ct = new Wind.Async.CancellationToken();
drawAsync(ct).start();
    }

    let stop = function () {
        if (ct === undefined) return;
        ct.cancel();
        ct = undefined;
    }
</script>
</body>
</html>